<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>钟表</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			body {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100vh;
				background: #34495e;
			}
			.clicks::before {
				content: '';
				position: absolute;
				top: -20px;
				left: -20px;
				right: -20px;
				bottom: -20px;
				background: #ecf0f1;
				border-radius: 50%;
				box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
				z-index: -1;
			}
			.clicks {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 400px;
				height: 400px;
				background: #f5f6fa;
				border-radius: 50%;
				box-shadow: inset 0 5px 20px rgba(0, 0, 0, 0.2);
			}
			.clicks li {
				position: absolute;
				left: 10px;
				top: 47%;
				list-style: none;
				width: 95%;
				border-radius: 50%;
				height: 20px;
				/* width: 20px; */
				line-height: 20px;
				font-size: 20px;
				font-weight: 700;
				/* background: #000; */
			}
			/* 数字位置 */
			.clicks ul li:nth-child(1) {
				transform: rotate(120deg);
			}
			.clicks ul li:nth-child(2) {
				transform: rotate(150deg);
			}
			.clicks ul li:nth-child(3) {
				transform: rotate(180deg);
			}
			.clicks ul li:nth-child(4) {
				transform: rotate(210deg);
			}
			.clicks ul li:nth-child(5) {
				transform: rotate(240deg);
			}
			.clicks ul li:nth-child(6) {
				transform: rotate(270deg);
			}
			.clicks ul li:nth-child(7) {
				transform: rotate(300deg);
			}
			.clicks ul li:nth-child(8) {
				transform: rotate(330deg);
			}
			.clicks ul li:nth-child(9) {
				transform: rotate(360deg);
			}
			.clicks ul li:nth-child(10) {
				transform: rotate(390deg);
			}
			.clicks ul li:nth-child(11) {
				transform: rotate(420deg);
			}
			.clicks ul li:nth-child(12) {
				transform: rotate(450deg);
			}
			/* 数字角度 */
			.clicks ul li span {
				display: block;
				width: 30px;
			}
			.clicks ul li:nth-child(1) span {
				transform: rotate(-120deg);
			}
			.clicks ul li:nth-child(2) span {
				transform: rotate(-150deg);
			}
			.clicks ul li:nth-child(3) span {
				transform: rotate(-180deg);
			}
			.clicks ul li:nth-child(4) span {
				transform: rotate(-210deg);
			}
			.clicks ul li:nth-child(5) span {
				transform: rotate(-240deg);
			}
			.clicks ul li:nth-child(6) span {
				transform: rotate(-270deg);
			}
			.clicks ul li:nth-child(7) span {
				transform: rotate(-300deg);
			}
			.clicks ul li:nth-child(8) span {
				transform: rotate(-330deg);
			}
			.clicks ul li:nth-child(9) span {
				transform: rotate(-360deg);
			}
			.clicks ul li:nth-child(10) span {
				transform: rotate(-390deg);
			}
			.clicks ul li:nth-child(11) span {
				transform: rotate(-420deg);
			}
			.clicks ul li:nth-child(12) span {
				transform: rotate(-450deg);
			}
			/* 指针 */
			.clicks div {
				width: 100%;
				position: absolute;
				display: flex;
				align-items: center;
				text-align: center;
			}
			.clicks div span {
				position: absolute;
				display: inline-block;
				background-color: #000;
			}
			/* 中心点 */
			.circle span {
				left: 50%;
				margin-left: -20px;
				width: 40px;
				height: 40px;
				border-radius: 50%;
			}
			.hou span {
				left: 15%;
				width: 40%;
				height: 8px;
			}
			.min span {
				left: 13%;
				width: 42%;
				height: 4px;
			}
			.sec span {
				left: 10%;
				width: 45%;
				height: 2px;
			}
			.hou {
				animation: secAnimate linear 86400s infinite;
			}
			.min {
				animation: secAnimate linear 3600s infinite;
			}
			.sec {
				animation: secAnimate linear 60s infinite;
			}
			@keyframes secAnimate {
				0% {
					transform: rotateX(0deg);
				}
				100% {
					transform: rotate(360deg);
				}
			}
		</style>
	</head>
	<body>
		<div class="clicks">
			<ul>
				<li><span>1</span></li>
				<li><span>2</span></li>
				<li><span>3</span></li>
				<li><span>4</span></li>
				<li><span>5</span></li>
				<li><span>6</span></li>
				<li><span>7</span></li>
				<li><span>8</span></li>
				<li><span>9</span></li>
				<li><span>10</span></li>
				<li><span>11</span></li>
				<li><span>12</span></li>
			</ul>
			<div class="circle"><span></span></div>
			<div class="hou"><span></span></div>
			<div class="min"><span></span></div>
			<div class="sec"><span></span></div>
		</div>
	</body>
</html>
